<template>
	<div class="list" ref="warrper">
	 	<div>
			<div class="area">
				<div class="title border-topbottom">当前城市</div>
				<div class="btn-list">
					<div class="btn-warrper">
						<div class="btn">{{this.$store.state.city}}</div>
					</div>
				</div>
			</div>
			<div class="area">
				<div class="title border-topbottom">热门城市</div>
				<div class="btn-list">
					<div class="btn-warrper" v-for="item in hot" :key="item.id">
						<div class="btn" @click="handleCityClick(item.name)">{{item.name}}</div>
					</div>
				</div>
			</div>
			<div class="area" v-for="(item,key) in cities" :key="key" :ref="key">
				<div class="title border-topbottom">{{key}}</div>
				<div class="item-list">
					<div class="item border-bottom" 
						 v-for="items in item" 
						 :key="items.id"
						 @click="handleCityClick(items.name)"
					>
						{{items.name}}
					</div>
				</div>
			</div>
		</div>	
	</div>
</template>

<script>
	import Bscroll from 'better-scroll'
	export default{
		name:'CityList',
		props:{
			hot:{
				type:Array,
				default:[]
			},
			cities:{
				type:Object,
				default:{}
			},
			letter:{
				type:String,
				default:''
			}
		},
		methods:{
			handleCityClick(city){
				this.$store.commit('changeCity',city)
				this.$router.push('/')
			}
		},
		mounted(){
			this.Bscroll = new Bscroll(this.$refs.warrper)
		},
		watch:{
			letter(){
				if(this.letter){
					const ele = this.$refs[this.letter][0]
					this.Bscroll.scrollToElement(ele)
				}
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import '~styles/common.styl'
	.border-topbottom
	    &:before
	      border-color: #ccc
	    &:after
	      border-color: #ccc
	.border-bottom
	    &:before
	      border-color: #ccc
	.list
		position:absolute 
		top:1.58rem
		left:0
		right:0
		bottom:0
		overflow:hidden     
		.title
			padding-left:.2rem
			line-height:.54rem
			background:#eee
			color:#666
			font-size:.26rem
		.btn-list
			overflow:hidden
			padding:.1rem .6rem .1rem .1rem
			.btn-warrper
				width:33.33%
				float:left
				.btn	
					margin:.1rem
					padding:0.1rem 0
					border-radius:.06rem
					text-align:center
					border:.02rem solid #ccc
		.item-list
			.item
				line-height:.76rem
				padding-left:.2rem	
					
</style>